<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">

      <div slot="header" class="clearfix">
            <span>
              <span class="h2">权限列表&nbsp</span>
              <span>以下列表中﹐默认排列出了当前系统权限﹐也可以根据以下条件进行筛选。</span>
            </span>
        <el-button size="medium" type="success" style="float: right; margin: -6px 5px">新增权限</el-button>
        <!--        <el-button style="float: right; padding: 3px 0" type="success">操作按钮</el-button>-->
      </div>

      <el-row>
        <!-- 表格 -->
        <template>
          <el-table
            max-height="450"
            :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
            <el-table-column
              prop="id"
              label="编号"
              sortable>
            </el-table-column>

            <el-table-column
              prop="name"
              label="权限名"
              sortable>
            </el-table-column>
            <el-table-column
              prop="remark"
              sortable
              label="备注">
            </el-table-column>
            <el-table-column
              prop="url"
              sortable
              label="访问的URL">
            </el-table-column>

            <el-table-column
              align="right">
              <template slot="header" slot-scope="scope">
                <el-input
                  v-model="search"
                  size="mini"
                  placeholder="输入关键字搜索"/>
              </template>
              <template slot-scope="scope">

<!--                <el-button-group>-->
<!--                  <el-button type="primary" icon="el-icon-search"></el-button>-->
<!--                  <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"></el-button>-->
<!--                  <el-button type="primary" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)"></el-button>-->
<!--                </el-button-group>-->

                <el-button type="text" style="color: #42b983">查看拥有该权限角色</el-button>
                <el-button type="text">修改权限信息</el-button>
                <el-button type="text" style="color: red">删除</el-button>

              </template>
            </el-table-column>

          </el-table>
        </template>
      </el-row>

      <el-row>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=current
            :page-sizes="[7, 15, 20, 25]"
            :page-size=size
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
          </el-pagination>
        </div>
      </el-row>

    </el-card>
  </div>
</template>

<script>
    export default {
        name: "Permission",
        data() {
            return {
                tableData: [{
                    id: '1',
                    name: '王小虎',
                    remark: '暂无备注',
                    url: 'http://localhost:8080/#/permission'
                }, {
                    id: '2',
                    name: '张三',
                    remark: '暂无备注',
                    url: 'http://localhost:8080/#/permission'
                }, {
                    id: '3',
                    name: '李四',
                    remark: '暂无备注',
                    url: 'http://localhost:8080/#/permission'
                }, {
                    id: '4',
                    name: '王五',
                    remark: '暂无备注',
                    url: 'http://localhost:8080/#/permission'
                }, {
                    id: '5',
                    name: '王五',
                    remark: '暂无备注',
                    url: 'http://localhost:8080/#/permission'
                }, {
                    id: '6',
                    name: '王五',
                    remark: '暂无备注',
                    url: 'http://localhost:8080/#/permission'
                }, {
                    id: '7',
                    name: '王五',
                    remark: '暂无备注',
                    url: 'http://localhost:8080/#/permission'
                }],
                search: '',
                size: 7,
                current: 1,
                total: 100
            }
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            /* 分页 */
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style scoped>
  .box-card {
    margin-top: 20px;
    /*background-color: #E9EEF3;*/
  }

  .h2 {
    font-size: 18px;
  }

  .h2 + span {
    font-size: 12px;
  }

  .block {
    display: flex;
    justify-content: center;
  }
</style>
